/**
 * 
 * 批量添加子集弹窗：
 * 
 * props: {
 *      visible: 是否显示弹窗,
 *      onClose: 关闭弹窗
 *      form: 平台form对象
 *      func_type: 节点类型,1:入职登记,2:员工信息维护;3:员工信息查询
 *      param_str: 列表界面:多选数据的pk_psnjob字段值,用逗号拼接
 *      pk_org: 主组织
 *      formTemplate: 弹窗的form表单对应在template里的名字，动态的话就起个名字
 *      tableTemplate: 弹窗的table对应在template里的名字
 * }
 * 
 */

import React, { Component, PureComponent } from 'react';

import './index.less';

import {
    base,
} from 'nc-lightapp-front';


import Buttons from './components/Buttons';


// 功能函数
import onTableBeforeEvent from './functions/onTableBeforeEvent';
import onTableAfterEvent from './functions/onTableAfterEvent';
import toBeSure from './functions/toBeSure';
import onFormBeforeEvent from './functions/onFormBeforeEvent';
import onFormAfterEvent from './functions/onFormAfterEvent';
import renderTable from './functions/renderTable';
import renderForm from './functions/renderForm';
import onSelect from './functions/onSelect';
import closeModal from './functions/closeModal';
import goToStep from './functions/goToStep';
import getTableData from './functions/getTableData';
import getTemplate from './functions/getTemplate';
import renderSelect from './functions/renderSelect';


import getLanguage from '../../language';

const language = {};


const {
    NCModal,
    NCSelect
} = base;

const {
    Header: NCModalHeader,
    Body: NCModalBody,
    Footer: NCModalFooter
} = NCModal;

const batchAddSubTemplate = 'batchAddSub';
const batchAddSubTaleTemplate = 'batchAddSubTaleTemplate';

class BatchAddSub extends PureComponent {
    constructor(props) {
        super(props);
        if (props.use) {
            props.use.editTable('batchAddSubTaleTemplate');
        }
        this.state = {
            step: 1,
            selectOptions: [],
            selectValue: '',
            currentForm: '',
            currentFormValue: {}, // form的数据
            language: {},
        };

        this.closeModal = this.closeModal.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.renderForm = this.renderForm.bind(this);
        this.renderTable = this.renderTable.bind(this);
        this.goToStep = this.goToStep.bind(this);
        this.onFormBeforeEvent = this.onFormBeforeEvent.bind(this);
        this.onFormAfterEvent = this.onFormAfterEvent.bind(this);
        this.toBeSure = this.toBeSure.bind(this);
        this.onTableBeforeEvent = this.onTableBeforeEvent.bind(this);
        this.onTableAfterEvent = this.onTableAfterEvent.bind(this);
        this.getTemplate = this.getTemplate.bind(this);
    }

    onTableBeforeEvent(...others) {
       return onTableBeforeEvent.call(this, ...others);
    }

    onTableAfterEvent(...others) {
        return onTableAfterEvent.call(this, ...others);
    }

    toBeSure() {
        return toBeSure.call(this, this.state.language);
    }

    onFormBeforeEvent(...args) {
        return onFormBeforeEvent.call(this, ...args);
    }

    onFormAfterEvent(...args) {
        return onFormAfterEvent.call(this, ...args);
    }

    componentDidMount() {
        const {
            meta: {
                getMeta
            }
        } = this.props;

        let template = getMeta();
        template[batchAddSubTaleTemplate] = {
            moduletype: 'table',
            rows: []
        };

        setTimeout(() => {
            this.props.MultiInit.getMultiLang({
                moduleId: 'p6007',
                domainName: 'hrhi',
                callback: (json, status, inlt) => {
                    this.setState({
                        language: json
                    });
                }
            });
        }, 1000);
    }

    renderTable(data) {
        return renderTable.call(this, data);
    }

    renderForm() {
        return renderForm.call(this);
    }

    onSelect(value) {
        return onSelect.call(this, value);
    }

    closeModal() {
        return closeModal.call(this);
    }


    goToStep(to) {
        return goToStep.call(this, to);
    }

    getTableData() {
        return getTableData.call(this);
    }

    getTemplate() {
        return getTemplate.call(this);
    }

    render() {
        const {
            selectValue,
            step,
            language
        } = this.state;

        const {
            visible,
            form: {
                createForm
            },
            editTable: {
                createEditTable
            }
        } = this.props;

        return (
            <NCModal
                show={visible}
                onHide={this.closeModal}
                onEntered={this.getTemplate}
                className="batch-add-sub-modal-wrapper"
                size="xlg"
                backdrop="static"
            >
                <NCModalHeader
                    closeButton={true}
                >
                    {language['hi6007-000005']}{/* 国际化处理： 批量添加子集*/}
                </NCModalHeader>
                <NCModalBody>
                    {
                        step === 1 && 
                        <div className="batch-add-sub-modal-content">
                            <div className="batch-add-sub-modal-up">
                                <span className="batch-add-sub-table-title-label">{language['hi6007-000006']}</span>{/* 国际化处理： 子集*/}
                                <NCSelect
                                    className="batch-add-sub-table-title-value"
                                    onSelect={this.onSelect}
                                    value={selectValue}
                                    allowClear={false}
                                >
                                    {renderSelect.call(this)}
                                </NCSelect>
                            </div>
                            <div className="batch-add-sub-modal-down">
                                {createForm(batchAddSubTemplate, {
                                    onBeforeEvent: this.onFormBeforeEvent,
                                    onAfterEvent: this.onFormAfterEvent
                                })}
                            </div>
                        </div>
                    }
                    {
                        step === 2 && 
                        <div className="batch-add-sub-modal-content">
                            {createEditTable(batchAddSubTaleTemplate, {
                                onBeforeEvent: this.onTableBeforeEvent,
                                onAfterEvent: this.onTableAfterEvent        
                            })}
                        </div>
                    }
                    
                </NCModalBody>
                <NCModalFooter>
                    <Buttons
                        step={step}
                        goToStep={this.goToStep}
                        toBeSure={this.toBeSure}
                        closeModal={this.closeModal}
                        language={language}
                    />
                </NCModalFooter>
            </NCModal>
        );
    }
}

export default BatchAddSub;
